<template>
    <div class="channel-edit-container">
        <!-- 我的频道 -->
        <van-cell center :border="false">
            <div slot="title" class="channel-title">我的频道</div>
            <van-button type="danger"  size="small" @click="onEdit">{{ isEdit ? '完成' : '编辑' }}</van-button>
        </van-cell>
        <van-grid :gutter="10">
            <van-grid-item 
            class="grid-item" 
            :class="{ active : index === active }"
            v-for="(userChannel,index) in userChannelList" 
            :key="index"  
            :icon=" (isEdit && index !==0) ? 'clear' : '' "
            icon-size="5px"
            @click="onUserChannelChange(index,userChannel)"
            :text="userChannel.name" />
        </van-grid>

        <!-- 频道推荐 -->
         <van-cell center :border="false">
            <div slot="title" class="channel-title">频道推荐</div>
        </van-cell>
        <van-grid :gutter="10">
            <van-grid-item  
            class="grid-item" 
            v-for="(recommendChannel,index) in recommendChannels" 
            :key="index"  
            @click="onAdd(recommendChannel)"
            :text="recommendChannel.name" />
        </van-grid>
    </div>
</template>

<script>
import { getAllChannels,setUserChannels,deleteUserChannels  }  from '@/api/channel'
import { mapState }  from 'vuex'
import { setItem } from '@/utils/storage'
export default {
    name: 'channelEdit',
    props:{
        userChannelList:{
            type: Array,
            require:true
        },
        active:{
            type:Number,
            require:true
        }
    },

    data() {
        return {
            allChannels:[],
            isEdit: false
        };
    },
    computed: {
        //推荐的频道列表
        // 所有频道 - 我的频道
        recommendChannels (){
            return this.allChannels.filter(channel => {
                return !this.userChannelList.find(userChannel =>{
                   return  userChannel.id === channel.id
                })
            })
        },
        ...mapState('user',['tokenInfo'])
    },

    mounted() {
        this.getAllChannelList()
    },

    methods: {
        async getAllChannelList () {
            const { data } = await getAllChannels()
            this.allChannels = data.data.channels
            console.log(data);
        },
        async onAdd (channel) {
          this.userChannelList.push(channel) 
          if(this.tokenInfo) {
              // 有登录过
              const { data } = await setUserChannels(this.userChannelList)
              console.log(data);
          }else{
              // 数据持久化 
              // TODO
              setItem('user-channels',this.userChannelList)
          }
        },
        onEdit () {
            this.isEdit = !this.isEdit
        },
        //
        onUserChannelChange (index,channel) {
            if(this.isEdit && index !== 0){
                // 编辑状态，删除频道
                this.deleteChannel(index,channel)
            }else{
                // 非编辑状态，切换频道
                this.switchChannel(index)
            }
        },

        async deleteChannel (index,channel) {
            console.log('删除频道');
            if(index <= this.active){
                this.$emit('update-active', this.active - 1);
            }
            
            this.userChannelList.splice(index,1)

            if(this.tokenInfo){
                // 已经登陆过
               await deleteUserChannels(channel.id)
            
            }else{
            // 数据持久化
              setItem('user-channels',this.userChannelList)
            }

        },
        switchChannel (index) {
            console.log('切换频道');
            this.$emit('close',index);
        }
    },
};
</script>

<style lang="less" scoped>
.channel-edit-container{
    padding-top: 54px ;
    .channel-title{
      font-size: 16px;
      color: #333333;
    }
    .grid-item{
        width: 80px;
        height: 43px;
        /deep/.van-grid-item__content{
            background-color: #f4f5f6;
            .van-grid-item__text{
                color: #222;
                font-size: 14px;
                white-space: nowrap;
                margin-top: unset;
            }
        }
        /deep/.van-grid-item__icon{
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 20px;
            color: red;
        }
    }
    .active{
      /deep/.van-grid-item__text{
            color: red !important;
        }
    }
}

</style>